fazyqjczx_org_cn/pages/about/[dir]/list-[id].vue

<template>
    <div id="newsList">
        <div class="topBg">
            <!-- 页面头部 -->
            <HomePageHead></HomePageHead>
            <!-- 页面导航 -->
            <HomePageNavigation></HomePageNavigation>
        </div>

        <!-- 页面内容 -->
        <div class="bwzp">
            <div class="bwzpTop">
                <div class="topTitle">
                    <h1>项目介绍</h1>
                    <span>XiangMuJieShao</span>
                </div>
                <div class="topContent">
                    <p>
                        <a href="#">全国法治调研中心</a>
                    </p>
                    <p>
                        <strong>政讯通·全国</strong>
                        <strong> 法制项目</strong>
                        网络平台由
                        <strong> 政讯通-全国政务信息一体化办公室</strong>
                        主管，联合30多家企事业单位组成，由北京政讯通法律咨询有限公司（国有控股）对外牵头运营。
                        <strong></strong>
                        <strong>政讯通·全国法制项目</strong>
                        网络平台有政务、行业独立域名网站各
                        <strong>100</strong>
                        个和
                        <strong>4</strong>
                        个综合管理网站共
                        <strong>204</strong>
                        个网站，按照不同的行业和功能分类为用户提供大体系、广领域、全方位、全过程，有针对性的全国性法律综合服务平台。
                    </p>
                    <p>
                        <strong>政讯通·全国</strong>
                        <strong>法制调研中心</strong>
                        是
                        <strong>政讯通·全国</strong>
                        <strong>法制项目</strong>
                        网络平台的4个综合管理网站之一，目前开设了栏目上千个，地市中心可全面覆盖我国334个地级市，
                        <strong>业务范围</strong>
                        涵盖资讯信息、奥情服务、法律咨询、法律调研、法律宣传、法规教育、法律援助等领域，日均会员访问量超过万次，累计完成法制调研课题千余件，网络信息化会员遍布全国各地，实施
                        <strong>行业、区域</strong>
                        全覆盖，是我国具有广泛传播力、影响力的新型主流媒体。
                    </p>
                </div>
            </div>
            <div class="bwzpBottom">
                <div class="bottomTitle">招贤纳士</div>
                <ul class="zhaopin_list">
                    <li>
                        <div class="zhaopin_left">
                            <span>全国法制资讯发布中心</span>
                            <div class="new_pin_text">聘</div>
                        </div>
                        <ul class="zhaopin_item">
                            <li>
                                <a href="#">全国法制资讯发布中心诚聘特邀编辑</a>
                            </li>
                            <li>
                                <a href="#">全国法制资讯发布中心诚聘特约通讯员</a>
                            </li>
                            <li>
                                <a href="#">全国法制资讯发布中心诚招法制资讯信息员</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="zhaopin_left">
                            <span>全国法制调研中心</span>
                            <div class="new_pin_text">聘</div>
                        </div>
                        <ul class="zhaopin_item">
                            <li>
                                <a href="#">全国法制调研中心诚征法制调研员</a>
                            </li>
                            <li>
                                <a href="#">全国法制调研中心诚聘法制监督员</a>
                            </li>
                            <li>
                                <a href="#">全国法制调研中心招聘法制调解员</a>
                            </li>
                            <li>
                                <a href="#">全国法制调研中心诚招法制宣传员</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="zhaopin_left">
                            <span>全国法制舆情监测中心</span>
                            <div class="new_pin_text">聘</div>
                        </div>
                        <ul class="zhaopin_item">
                            <li>
                                <a href="#">全国法制舆情监测中心招聘舆情处理师</a>
                            </li>
                            <li>
                                <a href="#">全国法制舆情监测中心招聘舆情监测员</a>
                            </li>
                            <li>
                                <a href="#">全国法制舆情监测中心诚聘法制观察员</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="zhaopin_left">
                            <span>全国法制发展促进中心</span>
                            <div class="new_pin_text">聘</div>
                        </div>
                        <ul class="zhaopin_item">
                            <li>
                                <a href="#">全国法制发展促进中心招聘法制调查员</a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <div class="bottomContent">
                    <div class="bottomContent_item">
                        <div class="itemTitle">
                            <a href="#">网络会员</a>
                        </div>
                        <ul class="itemList">
                            <!-- <li>
                                <a href="#">全国法制资讯发布中心</a>
                            </li>
                            <li>
                                <a href="#">全国法制资讯发布中心</a>
                            </li> -->
                        </ul>
                    </div>
                    <div class="bottomContent_item">
                        <div class="itemTitle">
                            <a href="#">地市中心</a>
                        </div>
                        <ul class="itemList">
                            <!-- <li>
                                <a href="#">全国法制资讯发布中心</a>
                            </li> -->
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- 页面底部 -->
        <HomeFoot></HomeFoot>
    </div>
</template>

<script setup>
//1.页面依赖 start ---------------------------------------->
import { ref, onMounted } from 'vue';

//3 设置seo信息
const setData = await requestDataPromise('/web/getWebsiteFootInfo', {
    method: 'GET',
    query: {},
});

let seoTitle = setData.data.website_head.title;
let seoDescription = setData.data.website_head.description;
let seoKeywords = setData.data.website_head.keywords;
let seoSuffix = setData.data.website_head.suffix;
let seoName = setData.data.website_head.website_name;

useSeoMeta({
    title: seoTitle + "_" + seoSuffix,
    meta: [
        { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
        { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 }
    ]
});
//3.设置seo信息 end---------------------------------------->
</script>

<style lang="less" scoped>
@media screen and (min-width: 1401px) {
    .bwzp {
        width: 100%;
        height: auto;
        overflow: hidden;
        margin: 20PX auto;
        max-width: 1920PX;
        background: #f1f1f1;
        font-family: "微软雅黑", Microsoft YaHei;


        .bwzpTop {
            width: 1400PX;
            margin: 0 auto;
            height: auto;
            overflow: hidden;
            padding: 20PX 40PX;
            background: #fff;
            position: relative;
            z-index: 1;
            border: 5PX solid #c31d1d;
            box-shadow: 3PX 0PX 5PX #c31d1d;
            margin: 20PX auto 0;
            border-radius: 20PX;
            box-sizing: border-box;

            .topTitle {
                width: 25%;
                height: 200PX;
                overflow: hidden;
                text-align: center;
                padding: 3% 0;
                position: absolute;
                top: 50%;
                left: 0;
                margin-top: -7%;

                h1 {
                    width: 100%;
                    height: auto;
                    overflow: hidden;
                    font-size: 60PX;
                    font-weight: bold;
                    color: #c31d1d;
                }

                span {
                    display: block;
                    width: 100%;
                    height: auto;
                    overflow: hidden;
                    font-size: 26PX;
                    color: #c31d1d;
                    margin-top: 15PX;
                }
            }

            .topContent {
                width: 75%;
                float: right;
                font-family: "宋体";

                p {
                    height: auto;
                    overflow: hidden;
                    line-height: 35PX;
                    font-size: 18PX;
                    color: #333;

                    strong {
                        text-decoration: none;
                        color: rgb(0, 0, 0);
                        font-weight: bold;
                        font-size: 19PX;
                    }
                }

                p:nth-child(1) a {
                    font-size: 24PX;
                    font-weight: bold;
                    color: #333;
                }
            }
        }

        .bwzpBottom {
            width: 1300PX;
            height: auto;
            overflow: hidden;
            padding: 40PX;
            border-radius: 20PX;
            margin: -20PX auto 20PX;
            background: #fff;
            border: 1PX solid #000;

            .bottomTitle {
                width: 100%;
                height: auto;
                line-height: 30PX;
                padding: 10PX;
                font-size: 24PX;
                color: #b52727;
                border-bottom: 2PX solid #000;
                box-sizing: border-box;
            }

            .zhaopin_list {
                width: 100%;
                height: auto;
                overflow: hidden;
                margin: 20PX auto;

                >li {
                    width: 99%;
                    height: auto;
                    overflow: hidden;
                    border: 2PX solid #c31d1d;
                    margin: 20PX auto;
                    background: #c31d1d;
                    min-height: 100PX;
                    display: flex;

                    .zhaopin_left {
                        width: 30%;
                        height: auto;
                        overflow: hidden;
                        padding: 32PX 116PX 30PX 10PX;
                        display: table-cell;
                        text-align: center;
                        vertical-align: middle;
                        position: relative;
                        box-sizing: border-box;

                        span {
                            display: inline-block;
                            width: 100%;
                            height: auto;
                            overflow: hidden;
                            text-align: center;
                            font-size: 24PX;
                            color: #fff;
                            position: absolute;
                            left: -45PX;
                            top: 34%;
                        }

                        .new_pin_text {
                            width: 90PX;
                            height: 90PX;
                            line-height: 90PX;
                            font-size: 65PX;
                            color: #fff;
                            font-weight: 400;
                            position: absolute;
                            right: 10PX;
                            top: 50%;
                            border: 1PX solid #fff;
                            text-align: center;
                            border-radius: 50%;
                            margin-top: -12%;
                        }
                    }

                    .zhaopin_item {
                        width: 70%;
                        height: auto;
                        min-height: 118PX;
                        overflow: hidden;
                        padding: 10PX;
                        background: #fff;

                        li {
                            width: 100%;
                            height: 40PX;
                            line-height: 40PX;
                            overflow: hidden;
                            font-size: 18PX;
                            background: #fff;
                            color: #000;
                            padding: 0 10PX;
                            border: none;
                            margin: 0;
                            box-sizing: border-box;

                            a {
                                font-size: 18PX;
                                color: #000;
                            }

                            a:hover {
                                color: #c31d1d;
                            }
                        }
                    }
                }
            }

            .bottomContent {
                width: 100%;
                height: auto;
                overflow: hidden;
                margin: 20PX auto;

                .bottomContent_item {
                    width: 49%;
                    height: auto;
                    overflow: hidden;
                    float: left;
                    margin: 10PX auto;
                    margin-right: 20PX;

                    .itemTitle {
                        width: 226PX;
                        height: 50PX;
                        line-height: 50PX;
                        background-color: #c31d1d;

                        a {
                            display: inline-block;
                            width: auto;
                            padding: 0 100PX 0 30PX;
                            background: #c31d1d;
                            overflow: hidden;
                            height: 50PX;
                            position: relative;
                            line-height: 50PX;
                            color: #fff;
                            font-size: 24PX;
                        }

                        a::after {
                            content: '';
                            display: block;
                            width: 100PX;
                            height: 100PX;
                            background: #fff;
                            position: absolute;
                            right: -54PX;
                            top: -61PX;
                            transform: rotate(307deg);
                        }
                    }

                    .itemList {
                        width: 100%;
                        min-height: 42PX;
                        overflow: hidden;
                        border: 1PX solid #ccc;
                        padding: 20PX;
                        box-sizing: border-box;

                        li {
                            a {
                                font-size: 18PX;
                                color: #333;
                            }
                        }
                    }

                    &:last-child {
                        margin-right: 0;
                    }
                }

            }
        }

    }
}

@media screen and (min-width: 801px) and (max-width: 1400px) {
    .bwzp {
        width: 100%;
        height: auto;
        overflow: hidden;
        margin: 20PX auto;
        background: #f1f1f1;
        font-family: "微软雅黑", Microsoft YaHei;

        .bwzpTop {
            width: 100%;
            margin: 0 auto;
            height: auto;
            overflow: hidden;
            padding: 20PX 40PX;
            background: #fff;
            position: relative;
            z-index: 0;
            border: 5PX solid #c31d1d;
            box-shadow: 3PX 0PX 5PX #c31d1d;
            margin: 20PX auto 0;
            border-radius: 20PX;
            box-sizing: border-box;

            .topTitle {
                width: 25%;
                height: auto;
                overflow: hidden;
                text-align: center;
                padding: 3% 0;
                position: absolute;
                top: 35%;
                left: 0;
                margin-top: -7%;

                h1 {
                    width: 100%;
                    height: auto;
                    overflow: hidden;
                    font-size: 60PX;
                    font-weight: bold;
                    color: #c31d1d;
                }

                span {
                    display: block;
                    width: 100%;
                    height: auto;
                    overflow: hidden;
                    font-size: 24PX;
                    color: #c31d1d;
                    margin-top: 15PX;
                }
            }

            .topContent {
                width: 75%;
                float: right;
                font-family: "宋体";

                p {
                    height: auto;
                    overflow: hidden;
                    line-height: 35PX;
                    font-size: 18PX;
                    color: #333;

                    strong {
                        text-decoration: none;
                        color: rgb(0, 0, 0);
                        font-weight: bold;
                        font-size: 19PX;
                    }
                }

                p:nth-child(1) a {
                    font-size: 24PX;
                    font-weight: bold;
                    color: #333;
                }
            }
        }

        .bwzpBottom {
            width: 98%;
            height: auto;
            overflow: hidden;
            background: #fff;
            border: 1px solid #000;
            margin: 0 auto;
            padding: 0 20px;
            box-sizing: border-box;
            margin-top: -3px;

            .bottomTitle {
                width: 100%;
                height: auto;
                line-height: 30px;
                padding: 10px;
                font-size: 24px;
                color: #b52727;
                border-bottom: 2px solid #000;
                box-sizing: border-box;
            }

            .zhaopin_list {
                width: 100%;
                height: auto;
                overflow: hidden;
                margin: 20px auto;

                >li {
                    width: 99%;
                    height: auto;
                    overflow: hidden;
                    border: 2px solid #c31d1d;
                    margin: 20px auto;
                    background: #c31d1d;
                    min-height: 100px;
                    display: flex;

                    .zhaopin_left {
                        width: 380PX;
                        height: auto;
                        overflow: hidden;
                        padding: 32PX 116PX 30PX 10PX;
                        display: table-cell;
                        text-align: center;
                        vertical-align: middle;
                        position: relative;
                        box-sizing: border-box;

                        span {
                            display: inline-block;
                            width: 100%;
                            height: auto;
                            overflow: hidden;
                            text-align: center;
                            font-size: 22PX;
                            color: #fff;
                            position: absolute;
                            left: -46PX;
                            top: 34%;
                        }

                        .new_pin_text {
                            width: 80PX;
                            height: 80PX;
                            line-height: 80PX;
                            font-size: 65PX;
                            color: #fff;
                            font-weight: 400;
                            position: absolute;
                            right: 10PX;
                            top: 50%;
                            border: 1PX solid #fff;
                            text-align: center;
                            border-radius: 50%;
                            margin-top: -12%;
                        }
                    }

                    .zhaopin_item {
                        width: 70%;
                        height: auto;
                        min-height: 118PX;
                        overflow: hidden;
                        padding: 10PX;
                        background: #fff;

                        li {
                            width: 100%;
                            height: 40PX;
                            line-height: 40PX;
                            overflow: hidden;
                            font-size: 18PX;
                            background: #fff;
                            color: #000;
                            padding: 0 10PX;
                            border: none;
                            margin: 0;
                            box-sizing: border-box;

                            a {
                                font-size: 18PX;
                                color: #000;
                            }

                            a:hover {
                                color: #c31d1d;
                            }
                        }
                    }
                }
            }

            .bottomContent {
                width: 100%;
                height: auto;
                overflow: hidden;
                margin: 20PX auto;
                padding: 0 3PX;
                box-sizing: border-box;

                .bottomContent_item {
                    width: 48%;
                    height: auto;
                    overflow: hidden;
                    float: left;
                    margin: 10PX auto;
                    margin-right: 15PX;

                    .itemTitle {
                        width: 226PX;
                        height: 50PX;
                        line-height: 50PX;
                        background-color: #c31d1d;

                        a {
                            display: inline-block;
                            width: auto;
                            padding: 0 100PX 0 30PX;
                            background: #c31d1d;
                            overflow: hidden;
                            height: 50PX;
                            position: relative;
                            line-height: 50PX;
                            color: #fff;
                            font-size: 24PX;
                        }

                        a::after {
                            content: '';
                            display: block;
                            width: 100PX;
                            height: 100PX;
                            background: #fff;
                            position: absolute;
                            right: -54PX;
                            top: -61PX;
                            transform: rotate(307deg);
                        }
                    }

                    .itemList {
                        width: 100%;
                        min-height: 42PX;
                        overflow: hidden;
                        border: 1PX solid #ccc;
                        padding: 20PX;
                        box-sizing: border-box;

                        li {
                            a {
                                font-size: 18PX;
                                color: #333;
                            }
                        }
                    }

                    &:last-child {
                        margin-right: 0;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 800px) {
    .bwzp {
        width: 100%;
        height: auto;
        overflow: hidden;
        margin: 20px auto;
        background: #f1f1f1;
        font-family: "微软雅黑", Microsoft YaHei;


        .bwzpTop {
            width: 100%;
            margin: 0 auto;
            height: auto;
            overflow: hidden;
            padding: 20px 40px;
            background: #fff;
            position: relative;
            z-index: 0;
            border: 5px solid #c31d1d;
            box-shadow: 3px 0px 5px #c31d1d;
            margin: 20px auto 0;
            border-radius: 20px;
            box-sizing: border-box;

            .topTitle {
                overflow: hidden;
                text-align: center;
                padding: 3% 0;
                margin-bottom: 10px;

                h1 {
                    width: 100%;
                    height: auto;
                    overflow: hidden;
                    font-size: 110px;
                    font-weight: bold;
                    color: #c31d1d;
                }

                span {
                    display: block;
                    width: 100%;
                    height: auto;
                    overflow: hidden;
                    font-size: 46px;
                    color: #c31d1d;
                    margin-top: 30px;
                }
            }

            .topContent {
                font-family: "宋体";

                p {
                    height: auto;
                    overflow: hidden;
                    line-height: 68px;
                    font-size: 34px;
                    color: #333;

                    strong {
                        text-decoration: none;
                        color: rgb(0, 0, 0);
                        font-weight: bold;
                        font-size: 36px;
                    }
                }

                p:nth-child(1) a {
                    font-size: 46px;
                    font-weight: bold;
                    color: #333;
                }
            }
        }

        .bwzpBottom {
            width: 98%;
            height: auto;
            overflow: hidden;
            padding: 40px;
            border-radius: 40px;
            margin: -40px auto 40px;
            box-sizing: border-box;
            background: #fff;
            border: 1px solid #000;

            .bottomTitle {
                width: 100%;
                height: auto;
                line-height: 60px;
                padding: 20px;
                font-size: 48px;
                color: #b52727;
                border-bottom: 2px solid #000;
                box-sizing: border-box;
            }

            .zhaopin_list {
                width: 100%;
                height: auto;
                overflow: hidden;
                margin: 20px auto;

                >li {
                    width: 99%;
                    height: auto;
                    overflow: hidden;
                    border: 2px solid #c31d1d;
                    margin: 20px auto;
                    background: #c31d1d;
                    min-height: 100px;
                    box-sizing: border-box;
                    position: relative;


                    .zhaopin_left {
                        width: 100%;
                        height: 100px;
                        overflow: hidden;
                        padding: 32px 116px 30px 20px;
                        display: table-cell;
                        text-align: center;
                        vertical-align: middle;
                        box-sizing: border-box;

                        span {
                            display: inline-block;
                            width: 100%;
                            height: auto;
                            overflow: hidden;
                            text-align: center;
                            font-size: 48px;
                            color: #fff;
                        }

                        .new_pin_text {
                            width: 90px;
                            height: 90px;
                            line-height: 90px;
                            font-size: 65px;
                            color: #fff;
                            font-weight: 400;
                            position: absolute;
                            right: 10px;
                            top: 15px;
                            border: 1px solid #fff;
                            border-radius: 50%;
                        }
                    }

                    .zhaopin_item {
                        width: 100%;
                        height: auto;
                        min-height: 240px;
                        overflow: hidden;
                        padding: 20px;
                        background: #fff;

                        li {
                            width: 100%;
                            height: 80px;
                            line-height: 80px;
                            overflow: hidden;
                            font-size: 30px;
                            background: #fff;
                            color: #000;
                            padding: 0 10px;
                            border: none;
                            margin: 0;
                            box-sizing: border-box;

                            a {
                                font-size: 30px;
                                color: #000;
                            }

                            a:hover {
                                color: #c31d1d;
                            }
                        }
                    }
                }
            }

            .bottomContent {
                width: 100%;
                height: auto;
                overflow: hidden;
                margin: 20PX auto;

                .bottomContent_item {
                    width: 48%;
                    height: auto;
                    overflow: hidden;
                    float: left;
                    margin: 10PX auto;
                    margin-right: 10PX;

                    .itemTitle {
                        width: 100%;
                        height: 100px;
                        line-height: 100px;
                        background-color: #c31d1d;

                        a {
                            display: inline-block;
                            width: auto;
                            height: 100px;
                            line-height: 100px;
                            color: #fff;
                            font-size: 48px;
                            padding: 0 30px;
                            background: #c31d1d;
                            overflow: hidden;
                        }
                    }

                    .itemList {
                        width: 100%;
                        min-height: 80px;
                        overflow: hidden;
                        border: 1px solid #ccc;
                        padding: 20px;
                        box-sizing: border-box;

                        li {
                            margin-bottom: 20px;

                            a {
                                font-size: 30px;
                                color: #333;
                            }

                            &:last-child {
                                margin-bottom: 0;
                            }
                        }
                    }

                    &:last-child {
                        margin-right: 0;
                    }
                }

            }
        }

    }
}
</style>